<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=basePath %>css/style.css">
	<link rel="stylesheet" href="<%=basePath %>css/datePicker.css">
	<link rel="stylesheet" href="<%=basePath %>css/mystyle.css">
	<title></title>
</head>
<body>
	<br><jsp:include page="../include/top.jsp"/>

	<div class="container" style="margin-top:100px">
		<div class="row">
			<div class="span2">
				<jsp:include page="../include/left.jsp">
					<jsp:param value="contact" name="tag"/>
				</jsp:include>
			</div>
			<div class="span10" style="margin:0px">

				<div class="well">
					
					<div class="row">
						<div class="span7">
							<div class="party-header">
								<table class="tables">
									<tr>
										<td class="avatar" style="padding-top: 0px;border-bottom:0px;vertical-align: top;">
											<img alt="" src="<%=basePath %>img/people.png">	
										</td>
										<td style="padding-top: 0px;border-bottom:0px;padding-left:10px;vertical-align: top;">
											<h3 style="margin:0px;line-height:24px;">${contact.name }</h3>
											<div style="padding:3px 0">
												<a href="#">${contact.position }</a> 
												<c:if test="${contact.company != null}">
									    			at
										    		<a href="cid">
										    			${contact.company }	
										    		</a>
									    			
									    		</c:if>
											</div>
											
											<div class="tags">
												<c:forEach items="${contact.tagList }" var="tag">
													<a href="<%=basePath %>contact/findByTag.action?tagName=${tag.name }" class="tag">${tag.name }</a>
												</c:forEach>
												<a href="javascript:;" id="addt" style="padding-left:5px;color: #555555;">编辑标签</a>
											</div>
											
											<div class="edit-tags" style="display:none">
												<div class="tag-list">
													<c:forEach items="${contact.tagList }" var="tag">
														<span class="wrapper">
															<a href="javascript:;" class="delTag" rel="${tag.id }"><i class="icon-remove"></i>${tag.name }</a>
														</span>
													</c:forEach>
												</div>
												<div style="padding:5px 0px">一次添加一个标签</div>
												<div class="add-tag" style="display:block">
							    					<input type="text" id="name" style="margin-bottom:0px"/>
							    					<button class="btn" style="font-size:12px;padding:1px 5px" type="button" id="save-tag">添加标签</button>
							    					<img  src="<%=basePath%>img/wait.gif" style="display:none"/>
							    					or
													<a href="javascript:;" class="cancaltag" >取消</a>
							    				</div>
												
												
											</div>
										</td>
									</tr>
								</table>
								
								<ul class="nav nav-tabs" style="margin-top:30px">
									<li class="active"><a href="#tab1" data-toggle="tab">记录&电子邮件</a></li>
									<li><a href="#tab2" data-toggle="tab">交易</a></li>
								</ul>
								<div class="tab-content">
									<div class="tab-pane active" id="tab1">
										<h6>添加有关这个联系人的记录</h6>
										<form  id="noteform" >
											<textarea cols="30" rows="3" class="span7" name="note.content" id="notecontent"></textarea>
											<div class="options" style="width:460px">
												<a href="javascript:;" id="optionclick">显示选项</a><small>(添加交易，或者修改权限)</small>
												<button class="saveNote btn " type="button"  style="font-size:12px;padding:1px 5px;float:right">保存</button>
											</div>
											<div id="showOptions" style="display:none">
												<h6>谁能看到这些客户?</h6>
												<label class="radio" style="font-size:12px;margin-top:10px">
													<input type="radio" name="views" class="views" value="all" checked="checked">
													所有的人
													</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="${cur_user.id }">
													只有我
												</label>
												<label class="radio" style="font-size:12px">
													<input type="radio" name="views" class="views" value="我和以下这些人">
													我和以下这些人
												</label>
												<div id="other" style="display:none;"></div>
												
												<h6>什么时候发生的?</h6>
												<input name="date1" id="tDate" class="date-pick" />
												
												
												<div id="sendEmail">
													<h6>为这个记录发送邮件</h6>
													<small>当你添加这个记录或者这个记录有评论时，将会发送邮件通知以下你选择的人</small><br/>
													<input type="checkbox"  class="allMmail" style="margin:0px"/>&nbsp;全部
													<div id="allPeople" >
														<c:forEach items="${userList}" var="user">
															<input type="checkbox" class="mail" style="margin:0px" value="${user.username }"/>&nbsp;${user.username }<br/>
														</c:forEach>
													</div>
													<div id="sendPeople"></div>
												</div>
												
												<hr/>
												<div >
													<button class="saveNote btn " type="button" style="font-size:12px;padding:1px 5px">保存</button>
												</div>
											</div>
											
										</form>
										
									<div id="content">	
									    <table class="notes tables">
									    	<tbody>
									    		<c:forEach items="${contact.noteList }" var="note">
									    		<tr class="mouse">
													<td class="notePic">
														<img alt="" src="<%=basePath %>img/people.png">
													</td>
										    		<td class="party" style="padding-bottom:10px">
										    			<div class="nubbin" style="clear:both;float:right;display:none">
										    				<a href="javascript:;" style="font-size:12px" class="edit" rel="${note.id }">编辑</a>
										    				<img src="<%=basePath%>img/wait.gif" style="display:none"/>
										    				<a href="javascript:;" >
										    					<img alt="" src="<%=basePath %>img/rubbish.png">
										    				</a>
															
														</div>
										    			<h6 style="margin:0px;line-height: 12px;">${note.content }</h6>
										    			<div style="margin-top:5px">
										    				<small>happen：${note.happentime}</small> 
										    				
										    			</div>
										    			<div style="float:right">
										    			--by ${note.user.username} 
										    			<br/>
										    			<small>${note.createtime}</small>
										    			</div>
										    		</td>
										    	</tr>
										    	
										    	<tr class="showedit" style="display:none"></tr>
										    	
									    	</c:forEach>
											</tbody>
										</table>
									</div>
										
									</div>
									<div class="tab-pane" id="tab2">
										<p>I'm in Section 2.</p>
									</div>
								</div>
								
							</div>
						</div>
						<div class="lefttask alltask" style="color:#000;position:absolute;margin-left:495px;margin-top:20px;display:none">
							<div class="popover left " >
								<div class="arrow" style="top:15%"></div>
								<h3 class="popover-title">为 ${contact.name } 添加新任务</h3>
								<div class="popover-content left" id="left">
											
								</div>
							</div>
									
						</div>
						<div class="span3" style="margin-left:0px;border-left: 1px solid #CCCCCC;width:237px;background-color:#F0F6F9">
							<div class="right-liner">
								<c:choose>
									<c:when test="${contact.type == '公司' }">
										<a href="<%=basePath %>contact/editContact.action?id=${contact.id}">编辑公司</a>
									</c:when>
									<c:otherwise>
										<a href="<%=basePath %>contact/editContact.action?id=${contact.id}">编辑联系人</a>
									</c:otherwise>
								</c:choose>
								
							</div>
							<div class="left-header">
								任务
								<a href="javascript:;" style="float:right;color:#555555" class="leftnewtask">添加一个任务</a>
							</div>
							<div class="tasks">
								<ul class="unstyled">
									<li>
										<div style="color:#555555">今天</div>
										<input type="checkbox" class="taskbox" style="margin:0px"/>
										&nbsp;做完
									</li>
									<li>
										<div style="color:#555555">明天</div>
										<input type="checkbox" class="taskbox" style="margin:0px"/>
										&nbsp;完成不了了
									</li>
								</ul>
							</div>
							
							<div class="left-header">
								<c:choose>
									<c:when test="${contact.type == '公司' }">
										公司信息
									</c:when>
									<c:otherwise>
										个人信息
									</c:otherwise>
								</c:choose>
								
								<a href="#" style="float:right;color:#555555">vCard</a>
							</div>
							<div class="information">
								<address>
									<br />
									<c:if test="${!empty contact.phonelist }">
										<small>电话:</small>
										<c:forEach items="${contact.phonelist }" var="phone">
											<div>
												<small>${phone.type }</small>
												${phone.name }
											</div>
										</c:forEach>
										<br />
									</c:if>
									
									<c:if test="${!empty contact.emaillist }">
										<small>邮箱:</small>
										<c:forEach items="${contact.emaillist }" var="email">
											<div>
												<small>${email.type }</small>
												${email.name }
											</div>
										</c:forEach>
										<br />
									</c:if>
									
									<c:if test="${!empty contact.websitelist }">
										<small>网址:</small>
										<c:forEach items="${contact.websitelist }" var="web">
											<div>
												<small>${web.type }</small>
												<a href="${web.name }">${web.name }</a>
											</div>
										</c:forEach>
										<br />
									</c:if>
									
									<c:if test="${!empty contact.imlist }">
										<small>即时通信:</small>
										<c:forEach items="${contact.imlist }" var="im">
											<div>
												<small>${im.type }</small>
												<small>${im.kind }</small>
												${im.account }
											</div>
										</c:forEach>
										<br />
									</c:if>
									<c:if test="${!empty contact.qqroom }">
										<small>社交网络：</small><br/>
										<a href="${contact.qqroom }">${contact.qqroom }</a>
										
										<br/>
										<br/>
									</c:if>
									
									<c:if test="${!empty contact.background }">
										<small>背景</small> <br/>
										${contact.background }
									</c:if>
									
									
								</address>
							</div>
							
							
						</div>

					</div>
					
					
				</div>
				
			</div>
			
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/date.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.datePicker.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
		$('.date-pick').datePicker({startDate:'1996-01-01'}).val(new Date().asString()).trigger('change');
		
		//改变头部新建任务的标题
		$(".topnewtask").click(function(){
			$(".toptitle").text("为${contact.name }添加新任务");
		});
		
		//保存任务
			$(".savetask").live("click",function(){
				$(this).hide();
				$(this).next().show();
				var content = $(".taskcontent").val();
				var time = $(".time").val();
				var taskuserid = $(".taskuserid").val();
				var category = $(".category").val();
				var views = null;
				if($(".taskviews").attr("checked")) {
					views = "all";
				}
				var $task = $(this).parent().parent().parent();
							
				$.post("<%=basePath%>task/saveTask.action",{
					"task.content" : content,
					"task.time":time,
					"task.user.id":taskuserid,
					"task.category":category,
					"task.views" : views,
					"task.type" : "${contact.type}",
					"task.typeid" : "${contact.id}"
					},function(){
						//保存成功后清除所有记录
						$("#top").empty();
						$task.hide();
				});
			});
		
		//添加标签
		$("#addt").live("click",function(){
			$(".tags").empty();
			$(".cancaltag").show();
			$(".edit-tags").show();
		});
		
		//保存标签
		$("#save-tag").click(function(){
			$(this).hide();
			$(this).next().show();
			
			var name = $("#name").val();
			var contactid = "${contact.id}";
			
			$.post("<%=basePath%>contact/addTag.action",{"tag.name":name,"tag.contact.id":contactid},function(date){
				var id = date;
				$("#name").val("");
				$("#name").next().show();
				$("#name").next().next().hide();
				$(".tag-list").append("<span class=\"wrapper\"><a href=\"javascript:;\" class=\"delTag\" rel="+id+"><i class=\"icon-remove\"></i>"+ name +"</a></span>");
			});
		});
		
		//取消编辑书签
		$(".cancaltag").click(function(){
			
			$(this).hide();
			$(this).prev().show();
			$.post("<%=basePath%>contact/contactTag.action",{"id":"${contact.id}"},function(date){
				
				var html = "";
				for(var i = 0 ; i < date.length; i ++) {
					html += "<a href=\"<%=basePath %>contact/findByTag.action?tagName=\""+date[i].name+" class=\"tag\">"+date[i].name+"</a>";
				}
				
				html += "<a href=\"javascript:;\" id=\"addt\" style=\"padding-left:5px;color: #555555;\">编辑标签</a>";
				$(".tags").append(html);
				$(".edit-tags").hide();
				$("#name").next().next().hide();
			});			
		});
		
		//删除标签
		$(".delTag").live("click",function(){
			var id = $(this).attr("rel");
			var $parenttag = $(this).parent();
			$(this).replaceWith("<img  src=\"<%=basePath%>img/wait.gif\" class=\"tag1\"/>");
			$.post("<%=basePath%>contact/delTag.action",{"id":id},function(){
				$(".tag1").remove();
				$parenttag.remove();
			});
		});
		
		
		//鼠标移入、移出
		$(".wrapper").live("mouseover",function(){
			$(".wrapper").css({
				"background-color":"#FFFFFF",
				"color":"#000"
			});
			$(this).css({
				"background-color":"#FFFFCC",
				"color":"#fff"
			});
		});
		
		$(".wrapper").live("mouseout",function(){
			$(".wrapper").css({
				"background-color":"#FFFFFF",
				"color":"#000"
			});
		});
		
		$(".tag").live("mouseover",function(){
			$(".tag").css({
				"background-color":"#F0F0F0",
				"color":"#000"
			});
			$(this).css({
				"background-color":"#555",
				"color":"#fff"
			});
		});
		
		$(".tag").live("mouseout",function(){
			$(".tag").css({
				"background-color":"#F0F0F0",
				"color":"#000"
			});
		});
		
		//我和一下这些人(还没有解决选择重复用户的问题)
		$(".others").live("change",function(){
			var v = $(this).val();
			
			$(this).empty();
			$(this).append("<option >"+v+"</option>");
			$(this).next().show();
			$(this).next().next().show();
			
			//显示发送email的人,添加一个人，发送email里多显示一个人
			
			html = "<input type=\"checkbox\" class=\"mail\" style=\"margin:0px\"/ value=\""+ v +"\"><span>" +v + "</span><br/>";
					
			$(this).parents("#showOptions").children("#sendEmail").children("#sendPeople").append(html);
			
			
		});
		
		//添加选择其他人选项
		function createHTML(){
			var html = "<hr style=\"border:0px;margin:1px 0px\"/><select  class=\"others\"  style=\"width:100px;margin:0px\">";
			html += "<option >选择其他人</option>";
			<c:forEach items="${userList}" var="user">
				html += "<option value=\"${user.username }\">${user.username }</option>";
			</c:forEach>
			html += "</select>";
			html += "<a href=\"javascript:;\" class=\"delother\" style=\"display:none\"><img src=\"<%=basePath%>img/del1.png\"/></a>";
			html += "<a href=\"javascript:;\" class=\"addother\" style=\"display:none\"><img src=\"<%=basePath%>img/plus1.png\"/></a>";
			return html;
		}
		
		//添加其他人
		$(".addother").live("click",function(){
			var html = createHTML();
			$(this).parent().append(html);
			$(this).remove();
		});
		
		//删除其他人
		$(".delother").live("click",function(){
			var v = $(this).prev().val();
			
			
			
			$(this).prev().remove();
			$(this).prev().remove();
			
			var length = $(this).parent().children().length;
			if(length == 2){
				var html = createHTML();
				$(this).parent().append(html);
				$(this).next().remove();
			} else {
				if($(this).next().hasClass("addother")){
					$(this).before("<a href=\"javascript:;\" class=\"addother\"><img src=\"<%=basePath%>img/plus1.png\"/></a>");
					$(this).next().remove();
				}
			}
			
			//同时还要删除发送email的人
			$(this).parents("#showOptions").children("#sendEmail").children("#sendPeople").children(".mail").each(function(){
				if($(this).val() == v){
					$(this).next().remove();
					$(this).next().remove();
					$(this).remove();
				}
				
			});
			$(this).remove();
		});
		
          //显示选择项（还原里面的默认设置）
          $("#optionclick").live("click",function(){
          		$(this).parent().hide();
          		$(this).parent().next().show();
          		
          		//清空选择里选择过的东西(还原默认设置)
          		$(".views").eq(0).attr("checked","checked");
				$("#sendPeople").empty();
				$("#other").empty();
				$("#allPeople").show();
          });
          
          //保存记录
          $(".saveNote").live("click",function(){
          	var content = $("#notecontent").val();
          	
          	var views = $(".views:checked").val();
			if(views == "我和以下这些人") {
				var v = "${cur_user.username}";
				$(".others").each(function(){
					if($(this).val() == "选择其他人"){
						v = v;
					} else {
						v += "," + $(this).val();
					}
					
				});
						
				views = v;
			}
				
			var happentime = $("#tDate").val();
			var sendemail = "";
			$(".mail").each(function(){
				if($(this).attr("checked") == "checked") {
					sendemail += "," + $(this).val();
				}
			});
			
          	$("#content").load("<%=basePath%>contact/noteStyle.action",{
          	"note.content":content,
          	"note.views":views,
          	"note.happentime":happentime,
          	"note.sendemail":sendemail,
          	"note.contactid":"${contact.id}",
          	"content":"savenote"},function(){
				$("#notecontent").val("");
				$("#showOptions").hide();
				
				
				
				$("#options").show();
				$(this).children().fadeIn("slow");
			});
          
          });
          
          //根据权限的选择来显示对谁发邮件
          $(".views").click(function(){
          	if($(".views:checked").val() == "all") {
          		//如果是全部的人，则列出所有人
          		$("#sendEmail").show();
          		$("#allPeople").show();
          		$("#sendPeople").empty();
          		$("#other").empty();
          		
          	} else if($(".views:checked").val() == "${cur_user.id}") {
          		$("#sendEmail").hide();
          		$("#other").hide();
          	} else if($(".views:checked").val() == "我和以下这些人") {
          		var html = createHTML();
          		$("#other").append(html);
          		$("#allPeople").hide();
          		$("#other").show();
          		
          	}
          });
          
          //全选
          $(".allMmail").click(function(){
          	if($(this).attr("checked") == "checked") {
          		$(".mail").each(function(){
          			$(this).attr("checked","checked");
          		});
          	} else {
          		$(".mail").each(function(){
          			$(this).removeAttr("checked");
          		});
          	}
          	
          });
          
          //取消全选
          $(".mail").live("click",function(){
          	if(!($(this).attr("checked") == "checked")) {
          		 $(".allMmail").removeAttr("checked");
          	}
          });
          
          //显示编辑和删除
          $(".mouse").live("mouseover",function(){
          	$(this).children().eq(1).children().eq(0).show();
          });
          
          $(".mouse").live("mouseout",function(){
          	$(this).children().eq(1).children().eq(0).hide();
          });
          
          //异步加载编辑
          $(".edit").live("click",function(){
          		var id = $(this).attr("rel");
          		var $edit = $(this);
          		$(this).hide();
          		$(this).next().show();
          		
          		
          		$(this).parents(".mouse").next().load("<%=basePath%>contact/editNote.action",{"id":id},function(){
          			$edit.parents(".mouse").hide();
          			$edit.show();
          			$edit.next().hide();
          			$(this).fadeIn("slow",function(){
          				$(this).children().children().children().children().eq(0).focus();
          			});	
          			$(this).children().fadeIn("slow");
				});
          });
          
          //打开更多选项（显示的是这个note的信息）
          $(".optionclick-edit").live("click",function(){
          		$(this).parent().hide();
          		$(this).parent().next().show();
          });
          
          //编辑views
          $(".radio-edit").live("click",function(){
          	if($(this).children().attr("checked") == "checked") {
          		var $views = $(this).children();
          		if($views.eq(0).attr("checked")) {
          		}
          	}
          });
          
         $("input[type='radio']").live("click",function(){
         	if($(this).val() == "all") {
         		$(this).parent().children(".other-edit").empty();
         	} else if($(this).val() == "${cur_user.id}") {
         		$(this).parent().children(".other-edit").empty();
         	} else if($(this).val() == "我和以下这些人"){
         		var html = createHTML();
          		$(this).parent().children(".other-edit").append(html);
         	} else {
         		$(this).parent().children(".other-edit").empty();
         	}
         	
         });
         
          
          //取消编辑
          $(".cancal").live("click",function(){
          		$(this).parents(".showedit").hide();
          		$(this).parents(".showedit").prev().show();
          		$(this).parent().parent().parent().remove();
          });
          
          //保存编辑
          $(".saveedit").live("click",function(){
          	
          	var content = $(this).parent().children(".notecontent").val();
          	var $viewinput = $(this).parent().children(".showOptions-edit").children("input[type='radio']");
          	var $others = $(this).parent().children(".showOptions-edit").children(".other-edit").children("select");
          	
          	var views = "";
          	$viewinput.each(function(){
          		if($(this).attr("checked")) {
          			views = $(this).val();
          			
          			if(views == "我和以下这些人") {
          				var v = "${cur_user.id}";
          				$others.each(function(){
          					v += "," + $(this).val();
          				});
          				views = v;
          			}
          		} 
          	});
          	var $happen = $(this).parent().children(".showOptions-edit").children(".date-pick");
          	
          	var happentime = $happen.val();
          	var id = $(this).attr("rel");
			var userid = $(this).next().val();
			var createtime = $(this).next().next().val();
			var dealid = $(this).next().next().next().val();
			var sendemail = $(this).next().next().next().next().val();
          	
          $("#content").load("<%=basePath%>contact/noteStyle.action",{
          	"note.id" : id,
          	"note.content":content,
          	"note.views":views,
          	"note.happentime":happentime,
          	"note.contactid":"${contact.id}",
          	"note.user.id" : userid,
          	"note.createtime" : createtime,
          	"note.dealid" : dealid,
          	"note.sendemail" : sendemail,
          	"content":"updatenote"},function(){
          	
				$("#notecontent").val("");
				$(this).children().fadeIn("slow");
			});
          	
          	
          		
          });
         
	
			
		});
	</script>
</body>
</html>